<template>
  <div :class="$style.container">
    <div :class="$style.content">
      <el-card class="box-card">
        <div slot="header">
          <span>欢迎登录</span>
        </div>
        <el-form :model="form" :rules="rules" ref="ruleForm" @keyup.enter.native="handleSubmitClick('ruleForm')">
          <el-form-item prop="account">
            <el-input v-model="form.account" placeholder="请输入您的账号">
              <template slot="prepend">
                <i :class="['iconfont', 'icon-user', $style.icon]"></i>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="pwd">
            <el-input v-model="form.pwd" type="password" placeholder="请输入您的密码">
              <template slot="prepend">
                <i :class="['iconfont', 'icon-fsresetpassword', $style.icon]"></i>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click.stop="handleSubmitClick('ruleForm')" >登录</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <div :class="$style.landscape"></div>
    <div :class="$style.filter"></div>
    <canvas id="canvas"></canvas>
  </div>
</template>
<script>
import { setToken} from '../../utils/auth'
import { signPwd } from '../../utils/config'
import onLoad from './index'
export default {
  data() {
    return {
      form: {
        account: "",
        pwd: ""
      },
      rules: {
        account: [{ required: true, message: "请输入账号", trigger: "blur" }],
        pwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 8, message: "密码不能少于8位", trigger: "blur" }
        ]
      }
    };
  },
  created () {
    sessionStorage.clear()
  },
  mounted () {
    onLoad()
  },
  methods: {
    // 提交
    handleSubmitClick(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          let res = await this.$http.post("/signIn", {
            email: this.form.account,
            password: signPwd(this.form.pwd),
            type: '01'
          });
          this.$store.commit('SET_USER', res.data)
          this.resetForm()
          this.$router.push('/base/userList')
        } else {
          return false;
        }
      });
    },
    // 重置表单
    resetForm () {
      this.form = {
        account: "",
        pwd: ""
      }
    }
  }
};
</script> 
<style lang="scss" module>
.container {
  margin: 0;
  overflow: hidden;
  width: 100%;
  min-height: 100vh;
  cursor: none;
  background: black;
  background: linear-gradient(to bottom, #000000 0%, #5788fe 100%);
  position: relative;
  .filter {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #fe5757;
    animation: colorChange 30s ease-in-out infinite;
    animation-fill-mode: both;
    mix-blend-mode: overlay;
  }
  @keyframes colorChange {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: .9;
    }
  }
  .landscape {
      position: absolute;
      bottom: 0px;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url('');
      background-size: 100% 250px;
      background-repeat: repeat-x;
      background-position: center bottom;
  }
  .content {
    position: absolute;
    right: 150px;
    top: 180px;
    width: 400px;
    height: 320px;
    z-index:100;
    h4 {
      border-bottom: 1px solid #e8eaec;
      line-height: 1;
      padding: 14px 16px;
    }
    form {
      margin: 20px;
      .icon {
        font-size: 20px;
      }
      button {
        width: 100%;
      }
    }
  }
}
</style>